<template>
  <div class="message" :class="isMe()">
    <div class="time">{{time}}</div>
    <div class="text">{{text}}</div>
  </div>
</template>

<script>
  export default {
    name: 'message',
    props: ['time', 'text', 'self'],
    data () {
      return {}
    },
    methods: {
      isMe () {
        if (this.self === true) {
          return {
            'self': true
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">

  .message{
    .text {
      display: inline-block;
      background-color: cornflowerblue;
      padding: 3px 5px;
      color: white;
      border-radius: 3px;
      text-align: left;
      margin: 5px 20px 5px 5px;
    }

    &.self {
      text-align: right;
      .text {
        background-color: #9c9c9c;
        margin-left: 20px;
        margin-right: 5px;
      }
    }
  }

  .time {
    text-align: center;
    margin-top: 2px;
    font-size: 8px;
  }
</style>
